<template>
	<div v-if="isAuth(['ROOT', 'DRIVER:SELECT'])">
		<el-form :inline="true" :model="queryParam" :rules="dataRule" ref="searchForm">
			<el-form-item prop="name">
				<el-input v-model="queryParam.query.name" placeholder="姓名" size="medium" class="input"
					clearable="clearable" />
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryParam.query.gender" class="input" placeholder="性别" size="medium"
					clearable="clearable">
					<el-option label="男" value="男" />
					<el-option label="女" value="女" />
				</el-select>
			</el-form-item>
			<el-form-item prop="phone">
				<el-input v-model="queryParam.query.phone" placeholder="电话" size="medium" class="input"
					clearable="clearable" />
			</el-form-item>
			<el-form-item prop="idNumber">
				<el-input v-model="queryParam.query.idNumber" placeholder="身份证" size="medium" clearable="clearable" />
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryParam.query.realAuthStatus" class="input" placeholder="实名认证" size="medium"
					clearable="clearable">
					<el-option label="审核中" value="0" />
					<el-option label="审核通过" value="1" />
					<el-option label="审核失败" value="2" />
					<el-option label="审核撤销" value="3" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
			</el-form-item>
		</el-form>
		<!--:dataVue.js进行数据绑定 -->
		<el-table v-if="dataList" :data="dataList" border v-loading="dataListLoading" cell-style="padding: 2px 0"
			style="width: 100%;" size="medium" @expand-change="expand" :row-key="getRowKeys" :expand-row-keys="expands">
			<el-table-column prop="content" header-align="center" align="center" type="expand">
				<template #default="scope">
					<div class="content-container">
						<div class="left">
							<table class="content-table">
								<tbody>
									<tr>
										<th>开车驾龄</th>
										<th>生日</th>
										<th>邮箱</th>
										<th>收信地址</th>
										<th>身份证住址</th>
									</tr>
									<tr>
										<td>{{ scope.row.year }}年</td>
										<td>{{ scope.row.birthday }}</td>
										<td>{{ scope.row.email }}</td>
										<td>{{ scope.row.mailAddress }}</td>
										<td>{{ scope.row.idcardAddress }}</td>
									</tr>
								</tbody>
							</table>
							<ul class="credentials-list">
								<li class="item">
									<el-image style="width: 350px; height: 220px" :src="scope.row.idcardFront"
										:preview-src-list="scope.row.idcardFrontList" fit="cover" />
									<p>【 身份证正面 】</p>
								</li>
								<li class="item">
									<el-image style="width: 350px; height: 220px" :src="scope.row.idcardBack"
										:preview-src-list="scope.row.idcardBackList" fit="cover" />
									<p>【 身份证背面 】</p>
								</li>
								<li class="item">
									<el-image style="width: 350px; height: 220px" :src="scope.row.idcardHolding"
										:preview-src-list="scope.row.idcardHoldingList" fit="cover" />
									<p>【 手持身份证 】</p>
								</li>
								<li class="item">
									<el-image style="width: 350px; height: 220px" :src="scope.row.drcardFront"
										:preview-src-list="scope.row.drcardFrontList" fit="cover" />
									<p>【 驾驶证正面 】</p>
								</li>
								<li class="item">
									<el-image style="width: 350px; height: 220px" :src="scope.row.drcardBack"
										:preview-src-list="scope.row.drcardBackList" fit="cover" />
									<p>【 驾驶证背面 】</p>
								</li>
								<li class="item">
									<el-image style="width: 350px; height: 220px" :src="scope.row.drcardHolding"
										:preview-src-list="scope.row.drcardHoldingList" fit="cover" />
									<p>【 手持驾驶证 】</p>
								</li>
							</ul>
						</div>
						<div class="right" v-if="scope.row.realAuthStatus == '已认证'">
							<div class="summary-panel">
								<h3 class="title">【 代驾数据摘要 】</h3>
								<ul class="monthly-list">
									<li class="item">
										<p class="section">月订单金额</p>
										<p class="value">
											<span>￥</span>
											{{ scope.row.total }}
										</p>
									</li>
									<li class="item">
										<p class="section">月订单分账</p>
										<p class="value">
											<span>￥</span>
											{{ scope.row.income }}
										</p>
									</li>
									<li class="item">
										<p class="section">代扣个税</p>
										<p class="value">
											<span>￥</span>
											{{ scope.row.tax }}
										</p>
									</li>
								</ul>
								<ul class="statistics-list">
									<li class="item">
										<p class="section">总代驾单数</p>
										<p class="value">{{ scope.row.count }}</p>
									</li>
									<li class="item">
										<p class="section">好评总数</p>
										<p class="value">{{ scope.row.ct1 }}</p>
									</li>
									<li class="item">
										<p class="section">差评总数</p>
										<p class="value">{{ scope.row.ct2 }}</p>
									</li>
									<li class="item">
										<p class="section">差评总数</p>
										<p class="value">{{ scope.row.ct3 }}</p>
									</li>
								</ul>
							</div>
							<div id="chart"></div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="name" header-align="center" align="center" min-width="80" label="姓名" />
			<el-table-column prop="gender" header-align="center" align="center" min-width="60" label="性别"
				:formatter="genderFormatter" />
			<el-table-column prop="phone" header-align="center" align="center" min-width="110" label="电话" />
			<el-table-column prop="idNumber" header-align="center" align="center" min-width="180" label="身份证" />
			<el-table-column prop="contactName" header-align="center" align="center" min-width="110" label="紧急联络人" />
			<el-table-column prop="contactPhone" header-align="center" align="center" min-width="110" label="联络人电话" />
			<el-table-column prop="realAuthStatus" header-align="center" align="center" min-width="130" label="实名认证">
				<template #default="scope">
					<el-tag v-if="scope.row.realAuthStatus === 0" type="info">审核中</el-tag>
					<el-tag v-if="scope.row.realAuthStatus === 1" type="primary">审核通过</el-tag>
					<el-tag v-if="scope.row.realAuthStatus === 2" type="success">审核失败</el-tag>
					<el-tag v-if="scope.row.realAuthStatus === 3" type="danger">审核撤销</el-tag>
				</template>
			</el-table-column>

			<el-table-column prop="realAuthStatus" header-align="center" align="center" min-width="100" label="司机状态">
				<template #default="scope">
					<el-tag v-if="scope.row.realAuthStatus === 1" type="success">启用</el-tag>
					<el-tag v-else type="danger">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column header-align="center" align="center" width="250" label="操作">
				<template #default="scope">
					<el-button type="text" size="medium" v-if="isAuth(['ROOT', 'USER:UPDATE'])"
						@click="showApproveModel(scope.row.id)" :disabled="scope.row.realAuthStatus != 0">
						审批认证
					</el-button>
					<el-button type="text" size="medium" v-if="isAuth(['ROOT', 'USER:UPDATE'])"
						@click="showRepealModel(scope.row.id)" :disabled="scope.row.realAuthStatus != 1">
						撤销认证
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="page"
			:page-sizes="[10, 20, 50]" :page-size="rows" :total="totalCount"
			layout="total, sizes, prev, pager, next, jumper"></el-pagination>

		<el-dialog v-model="approveModelVisible" title="提示信息" width="400px" center>
			<div class="notice">你确定已经核准该代驾司机的实名认证？</div>
			<div>
				<el-input type="text" v-model="auditRemark" placeholder="填写审核备注" />
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="approveHandle(true)">同意</el-button>
					<el-button type="danger" @click="approveHandle(false)">拒绝</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="repealModelVisible" title="提示信息" width="400px" center>
			<div class="notice">你确定取消该代驾司机的实名认证？</div>
			<div>
				<el-input type="text" v-model="cancelAuditRemark" placeholder="填写审核备注" />
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="repealModelVisible = false">取消</el-button>
					<el-button type="primary" @click="repealHandle">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<update ref="update" @refreshDataList="loadDataList"></update>
	</div>
</template>
<script>
	import $ from 'jquery';
	import request from '../utils/request'
	import Update from './driver-update.vue';
	import {
		ElMessage
	} from "element-plus";
	import router from "../router";

	export default {
		components: {
			Update
		},
		data() {
			return {
				//审核撤销的备注
				cancelAuditRemark: "",
				//审核成功(包括批准和拒绝)备注
				auditRemark: "",
				chart: '',
				dataList: [],
				//这是高级查询的对象 返回给后端
				queryParam: {
					page: 1,
					rows: 10,
					//高级查询
					query: {
						name: null,
						gender: null,
						phone: null,
						idNumber: null,
						realAuthStatus: null,
					}
				},

				totalCount: 0,

				dataListLoading: false,
				dataRule: {
					name: [{
						required: false,
						pattern: '^[\u4e00-\u9fa5]{1,10}$',
						message: '姓名格式错误'
					}],
					phone: [{
						required: false,
						pattern: '^1\\d{10}$',
						message: '电话格式错误'
					}],
					idNumber: [{
						required: false,
						pattern: '^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
						message: '身份证格式错误'
					}]
				},
				expands: [],
				content: {
					year: null,
					birthday: null,
					email: null,
					mailAddress: null,
					idcardAddress: null,
					idcardFront: null,
					idcardFrontList: [],
					idcardBack: null,
					idcardBackList: [],
					idcardHolding: null,
					idcardHoldingList: [],
					drcardFront: null,
					drcardFrontList: [],
					drcardBack: null,
					drcardBackList: [],
					drcardHolding: null,
					drcardHoldingList: [],
					total: null,
					income: null,
					tax: null,
					count: null,
					ct1: null,
					ct2: null,
					ct3: null
				},
				//这是控制审批认证的提示框变量
				approveModelVisible: false,
				//这是控制撤销认证提示框的变量
				repealModelVisible: false,
				//这是司机认证材料的ID 从哪里获取 又要传到哪里的
				driverMaterialId: null,
				getRowKeys(row) {
					return row.id;
				}
			};
		},
		methods: {
			updateDriverStatus(driverMaterialId) {
				this.$confirm("确定要修改司机状态？").then(() => {
					this.sendPost("/driver/driver/changestatus/" + driverMaterialId, (res) => {
						let {
							success,
							message,
							result
						} = res;
						if (success) {
							this.$message({
								message: '修改成功',
								type: 'success',
								duration: 1200
							});
							this.loadDataList();
						} else {
							this.$message({
								message: message,
								type: 'error',
								duration: 1200
							});
						}
					});
				});
			},
			/**撤销认证**/
			repealHandle() {
				let that = this;
				let param ={
					cancelAuditRemark : that.cancelAuditRemark,
					id : that.driverMaterialId,
				}
				that.post("/driver/manager/driverAuthMaterial/cancelAudit",param,(result)=>{
					
					let {success,message,code,data} = result;
					if(success){
						that.repealModelVisible = false;
						that.loadDataList();
						that.$message({
							duration: 2000,
							type:"success",
							message:"撤销成功",
						})
					}else{
						that.$message({
							duration: 2000,
							type:"error",
							message:"撤销失败",
						})
					}
				})
			},
			/** 审批认证 **/
			approveHandle(approve) {
				let _this = this;
				let param = {
					//传入是否审核成功
					approve: approve,
					//传入审批备注
					auditRemark: _this.auditRemark,
					//这是司机材料认证ID
					id: _this.driverMaterialId,
				}
				_this.post("/driver/manager/driverAuthMaterial/auditAuth", param, (result) => {
					let {
						message,
						code,
						data,
						success
					} = result;
					if (success) {
						_this.loadDataList();
						_this.approveModelVisible = false;
						_this.$message({
							message: '认证成功',
							type: 'success',
							duration: 1200
						})
					} else {
						_this.$message({
							message: '认证失败',
							type: 'error',
							duration: 1200
						})
					}
				})
			},
			/** 审批认证弹窗 **/
			showApproveModel(driverMaterialId) {
				this.driverMaterialId = driverMaterialId;
				this.approveModelVisible = true;
			},
			/**撤销认证的弹窗**/
			showRepealModel(driverMaterialId) {
				this.driverMaterialId = driverMaterialId;
				this.repealModelVisible = true;
			},
			/** 格式化实名状态 **/
			realAuthFormatter(row) {
				console.log(row)
				switch (row.realAuthStatus) {
					case 0:
						return "审核中";
					case 1:
						return "已通过";
					case 2:
						return "已驳回";
				}
				return "未知";
			},
			/**格式化性别 **/
			//在查询的时候 我们的gender就是字符串男/女
			//这里应该改成 
			genderFormatter(row) {
				return row.gender == "男" ? "男" : "女";
			},
			//加载列表数据
			loadDataList() {
				let _this = this;
				//这里应该如何向后端发起请求
				_this.post("/driver/manager/driverAuthMaterial/pagelist", _this.queryParam, (result) => {
					console.log(result);
					let {
						message,
						data,
						code,
						success
					} = result;
					//现在可以将data数据查询到
					console.log(data)
					if (success) {
						//将data赋值给dataList
						_this.dataList = data.rows;
					} else {
						this.$message({
							message: '查询失败',
							type: 'error',
							duration: 1200
						});
					}
				})
			}
		},
		created: function() {
			this.loadDataList();
		}
	};
</script>
<style lang="less" scoped="scoped">
	@import url('driver.less');
</style>